@import "./theme.less";

.common {
  .ant-dropdown-menu-item,
  .ant-dropdown-menu-submenu-title {
    color: @formLabel;
    font-size: 12px;
  }
  .ant-select-single:not(.ant-select-customize-input) .ant-select-selector {
    border: 1px solid #d9dde0;
    border-radius: 4px;
    padding: 0 12px;
  }
  .ant-select-item-option-content {
    font-size: 12px;
  }
  // 分页器
  .pagination-box {
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    .total-size {
      font-size: 12px;
      font-weight: 400;
      color: rgba(23, 30, 45, 0.65);
    }
  }
  .empty-data {
    padding: 68px 0px 44px 0;
    text-align: center;
    img {
      width: auto;
      margin: 0 auto;
    }
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(15, 21, 29, 0.4);
    line-height: 20px;
  }

  .ant-pagination-prev,
  .ant-pagination-next,
  .ant-pagination-jump-prev,
  .ant-pagination-jump-next {
    font-family: PingFang-SC;
    font-size: 12px;
    border-radius: 4px;
    min-width: 28px;
    height: 28px;
    color: rgba(23, 30, 45, 0.65);
    line-height: 32px;
  }
  .ant-pagination-jump-prev
    .ant-pagination-item-container
    .ant-pagination-item-ellipsis,
  .ant-pagination-jump-next
    .ant-pagination-item-container
    .ant-pagination-item-ellipsis {
    color: rgba(23, 30, 45, 0.65);
  }
  .ant-pagination-item-link {
    .anticon {
      vertical-align: 0;
    }
  }
  .ant-pagination-prev .ant-pagination-item-link,
  .ant-pagination-next .ant-pagination-item-link {
    border: 1px solid #d9dde0;
    border-radius: 4px;
    font-size: 12px;
    color: rgba(23, 30, 45, 0.65);
  }
  .ant-pagination-jump-prev
    .ant-pagination-item-container
    .ant-pagination-item-link-icon,
  .ant-pagination-jump-next
    .ant-pagination-item-container
    .ant-pagination-item-link-icon {
    color: @primary-color;
  }

  //左右按钮获得焦点
  .ant-pagination-prev:focus .ant-pagination-item-link,
  .ant-pagination-next:focus .ant-pagination-item-link {
    color: rgba(23, 30, 45, 0.65);
    border-color: #d9dde0;
  }
  //左右按钮hover
  .ant-pagination-prev:hover .ant-pagination-item-link,
  .ant-pagination-next:hover .ant-pagination-item-link {
    color: @primary-color;
    border-color: @primary-color;
  }
  //左右按钮点击
  .ant-pagination-prev:active .ant-pagination-item-link,
  .ant-pagination-next:active .ant-pagination-item-link {
    color: #fff;
    background: @primary-color;
    border-color: @primary-color;
  }

  //不可点击
  .ant-pagination-item-disabled:hover,
  .ant-pagination-disabled a,
  .ant-pagination-disabled:hover a,
  .ant-pagination-disabled:focus a,
  .ant-pagination-disabled .ant-pagination-item-link,
  .ant-pagination-disabled:hover .ant-pagination-item-link,
  .ant-pagination-disabled:focus .ant-pagination-item-link {
    border: 1px solid #d9dde0 !important;
    color: rgba(23, 30, 45, 0.65) !important;
    background: #fff !important;
  }
  .ant-pagination-prev,
  .ant-pagination-jump-prev,
  .ant-pagination-jump-next {
    margin-right: 8px;
  }

  //当前按钮hover和其他的不一样
  .ant-pagination {
    .ant-pagination-item-active {
      border: 1px solid transparent !important;
      font-weight: normal !important;
      background-color: @primary-color;
      a {
        color: #fff !important;
      }
      &:focus {
        background-color: @primary-color;
      }
      &:hover {
        background: @primary-color;
      }
      &:active {
        background: @primary-color;
      }
    }
  }

  .breadcrumb-header {
    img {
      cursor: pointer;
    }
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    display: flex;
    color: rgba(15, 21, 29, 0.4);
    .breadcrumb-back {
      margin-left: 6px;
      margin-right: 16px;
      cursor: pointer;
    }
    .breadcrumb-before {
      cursor: pointer;
    }
    .breadcrumb-current {
      font-family: PingFangSC-Medium, PingFang SC;
      color: #171e2d;
    }
    .line {
      font-weight: 400;
    }
  }
  .ant-table-placeholder {
    border-top: none;
    display: none;
  }
  .ant-select-selection__placeholder,
  .ant-select-search__field__placeholder.ant-select-selection__placeholder {
    color: @primary-color;
    font-weight: normal;
  }

  // 表单必填icon
  .common-select {
    &::before {
      display: inline-block;
      margin-right: 4px;
      color: #ff4d4f;
      font-size: 12px;
      font-family: SimSun, sans-serif;
      line-height: 1;
      content: "*";
    }
  }
  // tabs
  .ant-tabs-bar {
    // margin: 0 0 24px 0;
    margin: 0;
    background: #fff;
    padding: 0 38px;
    border-bottom: 1px solid #e9e9e9;
  }
  .ant-tabs > .ant-tabs-nav,
  .ant-tabs > div > .ant-tabs-nav {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex: none;
    background: #fff;
    flex: none;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 0;
    padding: 0 38px;
  }
 
  .ant-tabs {
    font-size: 14px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    height: 100%;
    .ant-tabs-tab-btn {
      line-height: 30px;
    }
  }
  .ant-tabs-nav .ant-tabs-tab {
    height: 100%;
    margin: 0 34px 0 0;
    padding: 10px 20px 1.5px 20px;
  }
  .ant-tabs-nav .ant-tabs-tab::before {
    border-radius: 0;
  }
  .ant-tabs-content {
    height: 100%;
    min-height: 335px;
  }

  // 表单涉及选择输入框样式，提示
  input {
    color: @normalColor;
  }
  textarea {
    font-size: 12px;
    color: @normalColor;
  }
  .ant-checkbox-wrapper {
    font-size: 12px;
  }

  // 表单

  .ant-form-item-label > label {
    height: 32px;
    font-size: 12px;
    padding-right: 1px;
    font-weight: 400;
    color: @formLabel;
    margin-right: 8px;
    &:not(.ant-form-item-required) {
      padding-left: 8px;
    }
    &::after {
      display: none;
    }
  }
  .form-item-required label {
    padding-left: 0 !important;
  }
  .ant-form-item-with-help {
    .ant-form-item-explain {
      font-family: PingFangSC-Regular;
      font-size: 12px;
      color: @placeholderColor;
      letter-spacing: 0;
      text-align: justify;
      line-height: 18px;
      margin-top: 2px;
    }
  }

  // b表单输入错误
  .ant-form-item-has-error {
    input,
    textarea {
      border-color: @error !important;
    }
    input:focus,
    textarea:focus {
      border-color: @error !important;
    }
    input:hover,
    textarea:hover {
      border-color: @error !important;
    }
    .ant-form-item-explain {
      color: @error;
    }
  }

  // 按钮禁用
  button[disabled] {
    color: #bbbbbb !important;
    background: #f5f5f5 !important;
    border: 1px solid #d9d9d9;
    span {
      color: #bbbbbb;
    }
  }

  // 状态样式
  .common-success {
    .common-table-status();
    border-color: #62c978;
    color: #10c038;
    background: #dbefd1;
  }

  .common-ing {
    .common-table-status();
    border-color: @primary-color;
    color: @primary-color;
  }

  .common-fail {
    .common-table-status();
    border-color: #f04134;
    color: #f04134;
    background: #ffdfd7;
  }

  .common-warn {
    .common-table-status();
    border-color: #ff931d;
    color: #ff931d;
    background: #fff3cd;
  }

  // 表格操作类按钮
  .common-operation {
    font-size: 12px;
    color: @primary-color;
    cursor: pointer;
    position: relative;
    &.disabled {
      color: @disabledColor;
      pointer-events: none;
    }
    & + .common-operation {
			margin-left: 16px;
			&:before {
				content: "";
				display: block;
				width: 1px;
				height: 12px;
				top: 50%;
				transform: translateY(-50%);
				background: #efefef;
				left: -8px;
				position: absolute;
			}
		}
  }

  // 表格右上角搜索框
  .common-search {
    float: right;
    width: 200px;
    height: 32px;
    border-radius: 4px;
    border: 1px solid #d9dde0;
    display: flex;
    padding: 5px 12px;
    align-items: center;
    background-color: #ffffff;
    transition: all 0.3s;
    &:hover {
      border-color: @primary-color;
    }
    &:focus {
      border-color: @primary-color;
      box-shadow: 0px 6px 18px 0px rgba(20, 30, 44, 0.1);
    }
    .search-input {
      margin-right: 8px;
      flex: 1;
    }
    .search-btn {
      margin-left: auto;
      display: flex;
      align-items: center;
      cursor: pointer;
    }
  }

  // 对话框蒙层
  .ant-modal-mask {
    background-color: rgba(0, 0, 0, 0.4);
  }

  // 修改antd message组件的样式
  .ant-message {
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(15, 21, 29, 1);
    line-height: 20px;
    .anticon {
      margin-right: 12px !important;
    }
  }

  // 对话框头部
  .ant-modal-header {
    padding: 0 0 0 20px;
    background: #fff;
    .ant-modal-title {
      font-family: PingFangSC-Regular;
      font-size: 16px;
      color: #031129;
      letter-spacing: 0;
      line-height: 50px;
      font-weight: normal;
    }
  }

  // 对话框
  .ant-modal-content {
    .ant-modal-close {
      .ant-modal-close-x {
        width: 50px;
        height: 50px;
        line-height: 50px;
      }
    }
  }

  // 对话框body
  .ant-modal-body {
    padding: 20px 40px 30px;
  }

  // 对话框底部
  .ant-modal-footer {
    padding: 13px 20px 14px;
  }

  // 默认对话框
  .common-normal-modal {
    width: 600px !important;
  }

  // 小尺寸对话框
  .common-small-modal {
    width: 400px !important;
    input,
    textarea {
      width: 200px;
    }
    .ant-select {
      width: 200px;
      input {
        width: 162px;
      }
    }
  }

  // 有tab的对话框 链码上传
  .common-modal-tab {
    .ant-tabs > .ant-tabs-nav,
    .common .ant-tabs > div > .ant-tabs-nav {
      padding: 0;
    }
    .ant-tabs-nav {
      border-right: 1px solid #e9ebef;
    }
    .ant-tabs-tab {
      margin-right: 0;
      padding: 10px 20px;
    }
    .ant-tabs-tab-active {
      background: @primary-color;
      color: #fff;
      .ant-tabs-tab-btn {
        color: #fff;
      }
    }
  }
}

.cursor {
    cursor: pointer;
}

.hover:hover {
    color: @primary-color;
}

.ant-table-tbody > tr.ant-table-row:hover > td {
  // background: fade(@primary-color, 20%);
  background: #d2ebe7;
}

.ant-table-filter-dropdown-btns {
  .clear {
    width: 48px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #D9D9D9;
    transition: all .3s;
    font-size: 12px;
    border-radius: 4px;
    &:hover {
      border-color: @primary-color;
      color: @primary-color;
    }
  }
  .confirm {
    width: 48px;
    height: 24px;
    display: flex;
    font-size: 12px;
    border-radius: 4px;
    color: #fff;
    justify-content: center;
    align-items: center;
    background-color: @primary-color;
  }
}

.ant-table-tbody > tr > td > .ant-table-wrapper:only-child .ant-table {
  margin-left: 0;
}

.handle-popover {
  .ant-popover-inner-content {
    padding: 6px 0;
  }
  .popover-handle-content {
    .popover-handle-item {
      padding: 8px 16px;
      font-size: 12px;
      white-space: nowrap;
      &:hover {
        background: @hoverColor-item;
      }
      &.disabled {
        color: @disabledColor;
        pointer-events: none;
      }
    }
  }
}